import React, { useState } from 'react'
import "./DateSelectPanel.css";
import DateSelectorWidget from "./DateSelectorWidget";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight, faChevronLeft, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { Container, Col, Row } from 'react-bootstrap';

// props.dateA
// props.dateB
// props.onDateAChanged
// props.onDateBChanged
// props.isUsingSwipeMode
function DateSelectPanel(props) {

    const [isHidePanel, setIsHidePanel] = useState(false);
    const [changeTypeA, setChangeTypeA] = useState('d');//d , m , y
    const [changeTypeB, setChangeTypeB] = useState('d');

    const padInt = function (ival, len) {
        let str = ival.toString();
        for (let i = str.length; i < len; ++i) {
            str = '0' + str;
        }
        return str;
    }

    const onContinueChangeClick = function(isA, addOrMinusOne ) {
        if( isA === true ){
            if( changeTypeA==='d'){
                let newDate1 = new Date(props.dateA) ;
                newDate1.setDate( newDate1.getDate()+addOrMinusOne) ;
                props.onDateAChanged(newDate1) ;
            }else if( changeTypeA==='m'){
                let newDate1 = new Date(props.dateA) ;
                newDate1.setMonth( newDate1.getMonth()+addOrMinusOne) ;
                props.onDateAChanged(newDate1) ;
            }else{
                let newDate1 = new Date(props.dateA) ;
                newDate1.setFullYear( newDate1.getFullYear()+addOrMinusOne) ;
                props.onDateAChanged(newDate1) ;
            }

        }else{
            if( changeTypeB==='d'){
                let newDate1 = new Date(props.dateB) ;
                newDate1.setDate( newDate1.getDate()+addOrMinusOne) ;
                props.onDateBChanged(newDate1) ;
            }else if( changeTypeB==='m'){
                let newDate1 = new Date(props.dateB) ;
                newDate1.setMonth( newDate1.getMonth()+addOrMinusOne) ;
                props.onDateBChanged(newDate1) ;
            }else{
                let newDate1 = new Date(props.dateB) ;
                newDate1.setFullYear( newDate1.getFullYear()+addOrMinusOne) ;
                props.onDateBChanged(newDate1) ;
            }


        }
    }

    function getLastDayValueOfMonth(year, month) {
        return (new Date(year, month + 1, 0)).getDate();
    }

    const onDateAClicked = function (y, m, d) {
        let newyear = props.dateA.getFullYear() + y;
        let newmonth = props.dateA.getMonth() + m;
        if (newmonth < 0) newmonth = 11;//11 is december
        if (newmonth > 11) newmonth = 0;//0  is january
        let monthdayinf = 1;
        let monthdaysup = getLastDayValueOfMonth(props.dateA.getFullYear(), props.dateA.getMonth());
        let newdate = props.dateA.getDate() + d;
        if (newdate < monthdayinf) newdate = monthdaysup;
        if (newdate > monthdaysup) newdate = monthdayinf;
        props.onDateAChanged(new Date(newyear, newmonth, newdate));
    }
    const onDateBClicked = function (y, m, d) {
        let newyear = props.dateB.getFullYear() + y;
        let newmonth = props.dateB.getMonth() + m;
        if (newmonth < 0) newmonth = 11;//11 is december
        if (newmonth > 11) newmonth = 0;//0  is january
        let monthdayinf = 1;
        let monthdaysup = getLastDayValueOfMonth(props.dateB.getFullYear(), props.dateB.getMonth());
        let newdate = props.dateB.getDate() + d;
        if (newdate < monthdayinf) newdate = monthdaysup;
        if (newdate > monthdaysup) newdate = monthdayinf;
        props.onDateBChanged(new Date(newyear, newmonth, newdate));
    }

    return (
        <>
            {
                (isHidePanel === false) ? (
                    <>
                        <FontAwesomeIcon
                            icon={faChevronLeft} color="rgb(53, 151, 209)"
                            style={{ position: 'absolute', left: '14px', bottom: '150px', fontSize: '20px', cursor: 'pointer' }}
                            onClick={() => setIsHidePanel(true)}
                        />
                        <div className="DateSelectPanel">
                            <div className="DateSelectA">
                                <Container style={{ textAlign: 'center' }}>
                                    {
                                        (props.isUsingSwipeMode === true) ? (
                                            <Row style={{ fontSize: '24px' }}>
                                                <Col style={{ color: 'rgb(53, 151, 209)' }}>A</Col>
                                            </Row>
                                        ) : null
                                    }

                                    <Row>
                                        <Col xs={3}>
                                            <FontAwesomeIcon
                                                icon={faChevronLeft}
                                                style={{ fontSize: '20px', cursor: 'pointer' }}
                                                onClick={() => onContinueChangeClick(true,-1)}
                                            />
                                        </Col>
                                        <Col xs={6}>
                                            <select style={{ border: '0px' }}
                                                value={changeTypeA}
                                                onChange={(ev) => setChangeTypeA(ev.target.value)}
                                            >
                                                <option value='d'>日</option>
                                                <option value='m'>月</option>
                                                <option value='y'>年</option>
                                            </select>
                                        </Col>
                                        <Col xs={3}>
                                            <FontAwesomeIcon
                                                icon={faChevronRight}
                                                style={{ fontSize: '20px', cursor: 'pointer' }}
                                                onClick={() => onContinueChangeClick(true,1)}
                                            />
                                        </Col>
                                    </Row>
                                    <Row style={{ fontSize: '16px' }}>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronUp}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(1, 0, 0)}
                                            />
                                        </Col>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronUp}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(0, 1, 0)}
                                            />
                                        </Col>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronUp}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(0, 0, 1)}
                                            />
                                        </Col>
                                    </Row>
                                    <Row style={{ fontSize: '22px' }}>
                                        <Col style={{ padding: '0px' }} xs={4}>{padInt(props.dateA.getFullYear(), 4)}</Col>
                                        <Col xs={4}>{padInt(props.dateA.getMonth() + 1, 2)}</Col>
                                        <Col xs={4}>{padInt(props.dateA.getDate(), 2)}</Col>
                                    </Row>
                                    <Row style={{ fontSize: '16px' }}>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronDown}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(-1, 0, 0)}
                                            />
                                        </Col>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronDown}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(0, -1, 0)}
                                            />
                                        </Col>
                                        <Col>
                                            <FontAwesomeIcon
                                                icon={faChevronDown}
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => onDateAClicked(0, 0, -1)}
                                            />
                                        </Col>

                                    </Row>
                                </Container>
                            </div>
                            <div className="DateSelectMid">
                                {(props.isUsingSwipeMode == true) ? <div className='DateSelectorWidgetSplitter'></div> : ""}
                            </div>

                            {
                                (props.isUsingSwipeMode == true) ? (
                                    <div className="DateSelectB">
                                        <Container style={{ textAlign: 'center' }}>
                                            <Row style={{ fontSize: '24px' }}>
                                                <Col style={{ color: 'rgb(53, 151, 209)' }}>B</Col>
                                            </Row>
                                            <Row>
                                                <Col xs={3}>
                                                    <FontAwesomeIcon
                                                        icon={faChevronLeft}
                                                        style={{ fontSize: '20px', cursor: 'pointer' }}
                                                        onClick={() => onContinueChangeClick(false,-1)}
                                                    />
                                                </Col>
                                                <Col xs={6}>
                                                    <select style={{ border: '0px' }}
                                                        value={changeTypeB}
                                                        onChange={(ev) => setChangeTypeB(ev.target.value)}
                                                    >
                                                        <option value='d'>日</option>
                                                        <option value='m'>月</option>
                                                        <option value='y'>年</option>
                                                    </select>
                                                </Col>
                                                <Col xs={3}>
                                                    <FontAwesomeIcon
                                                        icon={faChevronRight}
                                                        style={{ fontSize: '20px', cursor: 'pointer' }}
                                                        onClick={() => onContinueChangeClick(false,1)}
                                                    />
                                                </Col>
                                            </Row>
                                            <Row style={{ fontSize: '16px' }}>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronUp}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(1, 0, 0)}
                                                    />
                                                </Col>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronUp}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(0, 1, 0)}
                                                    />
                                                </Col>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronUp}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(0, 0, 1)}
                                                    />
                                                </Col>
                                            </Row>
                                            <Row style={{ fontSize: '22px' }}>
                                                <Col style={{ padding: '0px' }} xs={4}>{padInt(props.dateB.getFullYear(), 4)}</Col>
                                                <Col xs={4}>{padInt(props.dateB.getMonth() + 1, 2)}</Col>
                                                <Col xs={4}>{padInt(props.dateB.getDate(), 2)}</Col>
                                            </Row>
                                            <Row style={{ fontSize: '16px' }}>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronDown}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(-1, 0, 0)}
                                                    />
                                                </Col>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronDown}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(0, -1, 0)}
                                                    />
                                                </Col>
                                                <Col>
                                                    <FontAwesomeIcon
                                                        icon={faChevronDown}
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => onDateBClicked(0, 0, -1)}
                                                    />
                                                </Col>

                                            </Row>
                                        </Container>
                                    </div>
                                ) : ""
                            }
                            <div style={{ clear: 'both' }}></div>

                        </div>
                    </>
                ) : (
                    <FontAwesomeIcon
                        icon={faChevronRight} color="rgb(53, 151, 209)"
                        style={{ position: 'absolute', left: '14px', bottom: '150px', fontSize: '20px', cursor: 'pointer' }}
                        onClick={() => setIsHidePanel(false)}
                    />
                )
            }


        </>

    )
}

export default DateSelectPanel
